<template>
  <div class="home">
    <div class="tips" ref="tips">
      <p v-html="SecondaryMenu.tips"></p>
      <Vue_search
        style="margin-top: 10px"
        :SecondaryMenu="SecondaryMenu"
        v-if="SecondaryMenu.isSearch"
        @search="SearchData"
      />
    </div>
    <!-- 普通表格 -->
    <Vue_Table
      v-if="SecondaryMenu.isShow == 'table'"
      ref="VueTable"
      :tableData="tableData"
      :loading="loading"
      :tabaleHeight="tabaleHeight"
      @openDialog="isFormShow = true"
    />
    <!-- 宫格形式表格 -->
    <Vue_Grid
      :tabaleHeight="tabaleHeight"
      v-if="SecondaryMenu.isShow == 'grid'"
    />
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="paramsquery.pageIndex"
        :page-size="paramsquery.pageSize"
        layout="total, prev, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 引入修改弹窗表单组件 -->
    <Vue_Form :Mobile="Mobile" @UpdataList="GetDataList" />
    <!-- 引入新增弹窗表单组件 -->
    <AddForm :Mobile="Mobile"/>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { GetQwOrder, GetShipList } from "@/api/index";
import Vue_Table from "@/components/table";
import Vue_Grid from "@/components/grid";
import Vue_Form from "@/components/form";
import Vue_search from "@/components/search";
import AddForm from "@/components/addForm/index";
export default {
  name: "home-page",
  components: {
    Vue_Table,
    Vue_Form,
    Vue_Grid,
    Vue_search,
    AddForm
  },
  computed: {
    ...mapState([
      "TopMenuActive",
      "SecondaryMenuActive",
      "MenuList",
      "isMobile",
    ]),
    SecondaryMenu() {
      return this.MenuList.filter(
        (item) => item.BelongId === this.TopMenuActive
      )[this.SecondaryMenuActive];
    },
    GetApi() {
      return this.MenuList.filter(
        (item) => item.BelongId === this.TopMenuActive
      )[this.SecondaryMenuActive].GetApi;
    },
  },
  watch: {
    // 一级目录改变
    TopMenuActive(newvalue) {
      // console.log(newvalue,'一级目录改变的数据');
      this.loading = true
      this.GetDataList();
    },
    // 二级目录改变
    SecondaryMenuActive(newvalue) {
      this.loading = true
      this.GetDataList();
      // console.log(newvalue,'二级目录改变的数据');
    },
  },
  data() {
    return {
      loading: true,
      apiFuncs: {
        GetQwOrder: GetQwOrder,
        GetShipList: GetShipList,
      },
      SearchForm: {},
      tableData: [],
      paramsquery: {
        pageIndex: 1,
        pageSize: 30,
      },
      total: 0,
      tabaleHeight: "",
      Mobile: "",
      isFormShow: false,
      isTable: false,
    };
  },
  /* 生命周期 */
  mounted() {
    this.GetMobile();
    this.GetDataList();
  },
  /* 事件函数 */
  methods: {
    // 是否为手机端
    GetMobile() {
      const tipsHeight = this.$refs.tips.offsetHeight + "px";
      if (this.isMobile == "wap") {
        // 手机端逻辑
        this.tabaleHeight = `calc(100vh - ${tipsHeight} - 15px - 50px - 40px)`;
        this.Mobile = "phone";
      } else {
        // 非手机端逻辑
        // tipsHeight提示框高度  50px分页高度 50px底部按钮高度 15px提示框距离表格顶部  20px大框内边距
        this.tabaleHeight = `calc(100vh - ${tipsHeight} - 50px - 50px - 15px - 20px )`;
        this.Mobile = "windows";
      }
    },
    // 请求数据
    GetDataList() {
      this.loading = true;
      const data = {
        pageIndex: this.paramsquery.pageIndex,
        type: this.SearchForm.OrderType,
      };
      this.apiFuncs[this.GetApi](data).then((res) => {
        this.loading = false;
        this.isTable = true;
        this.$refs.VueTable.ResetTableStyle();
        res.orderList.map((item) => {
          Object.entries(item).forEach(([key, value]) => {
            if (value === null) {
              item[key] = "";
            }
          });
        });
        this.tableData = res.orderList;
        this.pageIndex = res.pageIndex;
        this.pageSize = res.pageSize;
        this.total = res.pageTotal;
      });
    },
    // 页码发生改变时
    handleCurrentChange(index) {
      this.paramsquery.pageIndex = index;
      this.GetDataList();
    },
    // 搜索数据
    SearchData(form) {
      this.SearchForm = form;
      this.GetDataList();
    },
  },
};
</script>
<style lang="less">
.home {
  width: 100%;
  height: 100%;
}
.tips {
  width: 100%;
  padding: 15px;
  margin-bottom: 15px;
  box-sizing: border-box;
  background-color: #ecf5ff;
}
.pagination {
  width: 100%;
  height: 50px !important;
  display: flex;
  align-items: center;
}
</style>
